import 'package:flutter/material.dart';
import 'package:flutter_vant/component/notify.dart';
import 'package:flutter_vant/main.dart';
import 'package:simulator/components/DemoView/index.dart';

class NotifyView extends HookWidget {
  const NotifyView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    openNotify(Map item) {
      VanNotify(
          option: VanNotifyOption(
              message: item['message'],
              color: item['color'],
              background: item['background'],
              type: item['type'] ?? VanNotifyType.danger),
          context: context);
    }

    List<Widget> renderList(List<Map> data) {
      return data.map((e) {
        return DemoView(
          title: e['title'],
          isGrid: false,
          children: [
            VanCellGroup(
              children: (e['children'] as List).map((el) {
                return VanCell(
                  isLink: true,
                  title: el['name'],
                  onClick: () => openNotify(el),
                );
              }).toList(),
            )
          ],
        );
      }).toList();
    }

    List<Widget> renderMain() {
      final List<Map> data = [
        {
          "title": '基础用法',
          'children': [
            {"name": '基础用法', 'message': '通知内容'}
          ]
        },
        {
          "title": '通知类型',
          'children': [
            {"name": '主要通知', 'message': '通知内容', 'type': 'primary'},
            {"name": '成功通知', 'message': '通知内容', 'type': 'success'},
            {"name": '危险通知', 'message': '通知内容', 'type': 'danger'},
            {"name": '警告通知', 'message': '通知内容', 'type': 'warning'},
          ]
        },
        {
          "title": '自定义配置',
          'children': [
            {
              "name": '自定义颜色',
              'message': '自定义颜色',
              'color': '#ad0000',
              'background': '#ffe1e1'
            },
            // {"name": '自定义位置', 'position': 'bottom'},
            // {"name": '自定义时长', 'duration': 1000},
          ]
        },
        // {
        //   'title': '组件调用',
        //   'children': [
        //     {"name": '组件调用'}
        //   ]
        // }
      ];
      return renderList(data);
    }

    return HookView(
      children: renderMain(),
      title: 'Notify',
    );
  }
}
